<template>
  <NavBarCmp :navbarTitle="cinemaName" :leftArrow="true" />
  <DownAppCmp :ad="adCinema" />
  <div class="name-location">
    <div class="name-location-left line-ellipsis">
      <div class="name-location-left-name line-ellipsis">
        {{ cinemaName }}
      </div>
      <div class="name-location-left-location line-ellipsis">
        {{ address }}
      </div>
    </div>
    <div class="location-icon">
      <van-icon name="location-o" class="icon" size="24" />
    </div>
  </div>
  <div class="movie-swipe">
    <div class="bg" :style="{ 'background-image': `url(${activeMovie.img})` }">
      <swiper-container ref="movieSwipe" :loop="false" :centered-slides="true" autoplay="false" slides-per-view="4"
        @swiperslidechange="handleSlideChange">
        <swiper-slide class="swiper-slide-item" v-for="(movie, index) in movies" :key="index"
          @click="handleClick(index)">
          <img :src="movie.img" :alt="movie.nm">
          <div class="triangle"></div>
        </swiper-slide>
      </swiper-container>
    </div>
    <div class="movie-info">
      <div class="movie-title">
        <div class="title">{{ activeMovie.nm }} </div>
        <span class="score">
          <template v-if="activeMovie.sc != 0">{{ activeMovie.sc }}<span>分</span></template>
          <template v-else> {{ activeMovie.wish }}<span>人想看</span></template>
        </span>
      </div>
      <div class="movie-desc">{{ activeMovie.desc }}</div>
    </div>
  </div>
  <!---- https://apis.netstart.cn/maoyan/cinema/shows?cinemaId=39528&ci=20&channelId=4-->
  <!--  电影排班 --->
  <van-tabs v-model:active="tabActive" @click-tab="onClickTab" ref="tabs">
    <van-tab :title="dateString" v-for="(dateString, dateIndex) in arrangementDate" :key="dateIndex">

      <!-- 插入广告 -->
      <div class="ad-vip">

        <van-tag color="#ff941a" size="mini">优惠</van-tag>

        <div class="interestText">{{ adShows.interestText }} <van-icon name="arrow" /></div>

      </div>



      <!-- 这里插入当前电影当前日期排班 -->
      <ul class="movie-schedule" v-if="plist.length > 0">
        <li class="schedule-item" v-for="(item, index) in plist" :key="index">
          <div class="time">
            <div class="show-time"> {{ item.tm }} </div>
            <div class="ending-time">{{ calculateEndTime(item.tm, activeMovie.dur) }}散场</div>
          </div>
          <div class="lang-hall">
            <div class="lang-version">{{ item.lang }} {{ item.tp }}</div>
            <div class="hall">{{ item.th }}</div>
          </div>
          <div class="price">
            <div class="sellPr">￥<span>{{ item.discountSellPrice }}</span> </div>
            <div class="vip" v-show="item.vipPriceName">
              <van-tag type="primary" class="vipName" color="#f90">{{ item.vipPriceName }}</van-tag>
              <van-tag plain type="warning" class="vipPrice" color="#f90">￥{{ item.vipPrice }}</van-tag>
            </div>
          </div>
          <van-button hairline plain round class="buy-btn" size="small" color="#f03d37">购票</van-button>
        </li>
      </ul>
      <!-- <div class="no-show" v-else>
        <img :src="noShowImg" alt="to-no-show" />
        <p>今日场次已映完</p>
      </div> -->
      <div class="no-show" v-else>
        <van-empty :image="noShowImg" image-size="60" description="今日场次已映完" />
      </div>
    </van-tab>
  </van-tabs>
  <!-- 超值套餐 -->
  <div class="cinema-package">
    <div class="title">影院超值套餐</div>
    <ul>
      <li class="package-item" v-for="(list, index) in dealList" :key="index">
        <img :src="list.imageUrl" :alt="list.title">
        <div class="package-info">
          <div class="package-title">
            <van-tag color="#f90" class="title-tag">{{ list.titleTag }}</van-tag>
            {{ list.title }}
          </div>
          <div class="sell-number">{{ list.curNumberDesc }}</div>
          <div class="package-price-buy">
            <span class="price"> <span>￥</span>{{ list.price }}</span>
            <van-button class="buy-btn" size="small" color="#f03d37">去购买</van-button>
          </div>
        </div>
      </li>

    </ul>
  </div>
</template>
<script setup>
import noShowImg from "@/assets/today-no-show.png"
import { formatDates, calculateEndTime } from "@/tools/index.js"
import { fetchSchedule, fetchCinemaPackages, fetchAdvert, fetchCinemaDetail } from "@/api/index.js"
import { ref, onMounted, useTemplateRef, computed } from 'vue'
import { useStore } from "@/stores/index.js"
const store = useStore()
import { useRoute } from 'vue-router'
const route = useRoute()
// const location = route.query.location || ''
const movieSwipe = useTemplateRef('movieSwipe')
const tabs = useTemplateRef('tabs')
const tabActive = ref(0);
const activeMovieIndex = ref(0); //当前电影背景图片索引
//当前电影
const activeMovie = computed(() => {
  return movies.value[activeMovieIndex.value] || {}
})
const shows = computed(() => {
  return activeMovie.value.shows || []
})
// 当前电影 当前日期排片
const show = computed(() => {
  // return activeMovie.value.shows[tabActive.value] || {}
  return shows.value[tabActive.value] || {}
})
const plist = computed(() => {
  // return activeMovie.value.shows[tabActive.value].plist || []
  return show.value.plist || []
})
// const stoneData = ref({})
const cinemaName = ref('')
const movies = ref([])  //当前影院上映的电影列表
const arrangementDate = ref([]) //某个电影的上映日期
//const arrangementList = ref([])    // 某个电影的当天排片计划
const dealList = ref([]) //影院超值套餐列表
const props = defineProps({
  cinemaId: {
    type: Number,
  }
})

const adInfo = ref({}) //全部广告信息

const adCinema = computed(() => {  //影院详情页广告
  return adInfo.value.cinema || {}
})

const adMovie = computed(() => { //电影详情页广告
  return adInfo.value.movie.list || []
})

const adMovieList = computed(() => { //电影列表广告
  return adInfo.value.movielist || {}
})


const adOther = computed(() => { //其他广告
  return adInfo.value.other || {}
})


const adPreview = computed(() => { //电影视频预览广告
  return adInfo.value.preview.list || []
})

const adShows = computed(() => { //电影视频预览广告
  return adInfo.value.shows || {}
})

const adVod = computed(() => { //视频点播广告
  return adInfo.value.vod || {}
})


const address = ref('') //影院地址


onMounted(async () => {

  const cinema = await fetchCinemaDetail(route.params.cinemaId)
  address.value = cinema.data.addr



  tabs.value.resize();
  // console.log("tabs", tabs.value);
  // console.log("movie-swipe", movieSwipe.value.swiper.activeIndex);
  const response = await fetchSchedule(props.cinemaId, store.currentCity.id)
  cinemaName.value = response.data.cinemaName
  // cinemaDesc.value = response.data.cinemaDesc
  movies.value = response.data.movies
  // 设置当前电影排班日期
  // arrangementDate.value = movies.value[activeMovieIndex.value].shows.map((show) => (
  //   show.showDate
  // ))
  arrangementDate.value = shows.value.map((show) => (
    show.showDate
  ))
  arrangementDate.value = formatDates(arrangementDate.value)
  // 影院套餐
  const res = await fetchCinemaPackages()
  dealList.value = res.data.dealList
  // console.log("dealList", dealList.value);
  // 加载广告
  const resAdvert = await fetchAdvert()
  // console.log("resAdvert", resAdvert);
  adInfo.value = resAdvert.data.activityDynamic.server


});
const handleSlideChange = (event) => {
  // console.log("handleSlideChange", event.detail[0].activeIndex);
  // 切换当前电影
  activeMovieIndex.value = event.detail[0].activeIndex
  // 设置当前电影排班日期
  // arrangementDate.value = movies.value[activeMovieIndex.value].shows.map((show) => (
  //   show.showDate
  // ))
  arrangementDate.value = shows.value.map((show) => (
    show.showDate
  ))
  arrangementDate.value = formatDates(arrangementDate.value)
  // 设置当前电影排班计划
  // arrangementList.value = activeMovie.value.shows[tabActive.value].plist
}
const handleClick = (index) => {
  // 滑动到指定图片
  movieSwipe.value.swiper.slideTo(index, 300, false)
  // 切换当前电影
  activeMovieIndex.value = index
};
const onClickTab = ({ name }) => {
  // console.log("onClickTab", name);
  tabActive.value = name
};
</script>
<style scoped>
.line-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

.name-location {
  position: relative;
  display: flex;
  flex-direction: row;
  padding: 10px;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

.name-location .name-location-left {
  display: flex;
  flex-direction: column;
  padding-right: 10px;
}

.name-location .name-location-left .name-location-left-name {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: #333;
}

.name-location .name-location-left .name-location-left-location {
  margin-top: 2px;
  font-size: 13px;
  line-height: 18.5px;
  color: #999;
}

.name-location .location-icon {
  position: relative;
  border-left: 1px solid #eee;
  width: 60px;
  /* 显式设置宽度 */
  height: 30px;
  /* 显式设置高度 */
  padding-left: 10px;
}

.name-location .location-icon .icon {
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 0
}

/*********************** movie-swipe *******************/
.movie-swipe {
  /* background-color: #010101; */
  padding: 10px 0;
  position: relative;
  width: 100%;
  background-color: #fff;
}

swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  backdrop-filter: blur(30px);
  /* 模糊背景 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 半透明背景色 */
}

swiper-slide {
  width: 90px !important;
  height: 120px !important;
  text-align: center;
  font-size: 18px;
  /* background: #fff; */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 300ms;
  position: relative;
  /* 确保子元素可以绝对定位 */
}

.swiper-slide-item {
  cursor: pointer;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中（如果需要） */
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
  text-align: center;
  position: relative;
}

.swiper-slide-active img {
  transform: scale(1);
}

swiper-slide img {
  display: block;
  /* width: 100%;
  height: 100%; */
  width: 90px;
  height: 120px;
  object-fit: cover;
  transform: scale(0.9);
}

/****  分页器 ****/
.swiper-slide-active .triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid white;
  /* 底边朝上 */
  position: absolute;
  bottom: -10px;
  /* 调整三角形的位置 */
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  /* 旋转180度 */
}

/***************  movie-info  ******************** */
.movie-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}

.movie-info .movie-title .title {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  font-size: 17px;
  color: #333;
  font-weight: 700;
}

.movie-info .movie-title .score {
  color: #ffb400;
  font-size: 16px;
  margin-left: 5px;
}

.movie-info .movie-title .score span {
  font-size: 10px;
}

.movie-info .movie-desc {
  margin-top: 2px;
  height: 18.5px;
  line-height: 18.5px;
  font-size: 13px;
  color: #999;
}

/*********** movie-schedule ***************/
.movie-schedule {
  padding: 0 10px;
  background-color: #fff;
}

.schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

.schedule-item:last-child {
  border-bottom: none;
}

.schedule-item .time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.schedule-item .time .show-time {
  font-size: 20px;
  color: #333;
  line-height: 1;
  white-space: nowrap;
  margin-bottom: 2px;
}

.schedule-item .time .ending-time {
  margin-top: 10px;
  color: #999;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.schedule-item .lang-hall {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* flex: 1; */
  margin-left: 20px;
  width: 100px;
}

.schedule-item .lang-hall .lang-version {
  line-height: 18px;
  font-size: 13px;
  color: #333;
  white-space: normal;
  margin-bottom: 5px;
}

.schedule-item .lang-hall .hall {
  font-size: 11px;
  color: #999;
  white-space: normal;
}

.schedule-item .price {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.schedule-item .price .sellPr {
  font-size: 12px;
  color: #f03d37;
}

.schedule-item .price .sellPr span {
  /* color: #f03d37; */
  font-size: 19px;
}

.schedule-item .price .vip {
  font-size: 12px
}

.schedule-item .price .vip .vipName {
  font-size: 10px;
  /* width: 36px; */
}

.schedule-item .price .vip .vipPrice {
  font-size: 10px;
  /* width: 36px; */
}

.schedule-item .buy-btn {
  width: 50px;
  height: 25px;
  line-height: normal;
  font-size: 12px;
  text-align: center;
}

.no-show {
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/*******************  影院超值套餐 *******************/
.cinema-package {
  margin-top: 10px;
  padding: 0 10px;
  background-color: #fff;
}

.cinema-package .title {
  color: #666;
  font-size: 15px;
  padding: 10px 0;
  border-bottom: 2px solid #eee;
}

.package-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

.package-item:last-child {
  /* border-bottom: none; */
}

.package-item img {
  width: 92px;
  height: 92px;
  /* flex: 1; */
}

.package-item .package-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1;
  margin-left: 10px;
}

.package-item .package-info .package-title {
  font-size: 14px;
  line-height: 18px;
  color: #333;
  overflow: hidden;
}


.package-item .package-info .package-title .title-tag {
  font-size: 10px;
  line-height: 15px;
  height: 15px
}


.package-item .package-info .sell-number {
  width: 100%;
  text-align: right;
  margin: 10px 0;
  line-height: 16px;
  height: 16px;
  font-size: 12px;
  color: #999;
}


.package-price-buy {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.package-price-buy .price {
  /* position: absolute;
  top: 0;
  left: 0; */
  color: #f03d37;
  font-size: 17px;
}

.package-price-buy .price span {
  font-size: 14px;
}


.package-price-buy .buy-btn {
  /* position: absolute;
  top: 0;
  right: 0; */
  height: 27px;
  line-height: 27px;
  font-size: 12px;
}


/******* 排班广告 *****/
.ad-vip {
  display: flex;
  background-color: #fff5ea;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10px;
}


.interestText {
  color: #999;
  font-size: 12px
}
</style>
